<template>
  <div>
    <input
      class="insert--input"
      v-if="htmlType === 'input'"
      v-model="inputValue"
      :style="{ width: selectWidth }"
      :id="contentId"
      :disabled="disabled"
    />
    <span v-if="htmlType === 'text'" :id="contentId">
      {{ inputValue }}
    </span>
  </div>
</template>
  
  <script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "ReportInputComp",
  props: {
    htmlType: {
      type: String,
    },
    htmlIndex: {
      type: String,
    },
    htmlValue: {
      type: String,
    },
    insertNode: {
      type: String,
    },
    childIndex: {
      type: String,
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      selectWidth: "30px",
      inputValue: "",
      contentId: `content${uuidv4()}`,
      savedRange: {},
    };
  },
  watch: {
    inputValue(val) {
      if (val) {
        this.selectWidth = val.length * 16 + "px"; // 14 是动态的，可变的
      } else {
        this.selectWidth = "30px";
      }
    },
    insertNode(val) {
      if (val) {
        this.insert();
      }
    },
  },
  computed: {},
  beforeMount() {
    this.inputValue = this.htmlValue;
  },
  mounted() {
    //光标变化时候保存光标位置
    document.addEventListener("selectionchange", this.selectHandler);
  },
  methods: {
    selectHandler() {
      // 监听选定文本的变动
      let sel = window.getSelection();
      let range = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
      if (
        range &&
        range.commonAncestorContainer.ownerDocument.activeElement.id ===
          this.contentId
      ) {
        this.savedRange = range;
        this.$emit("update-range", this.htmlIndex);
      }
    },
    insert() {
      if (this.htmlIndex === this.childIndex) {
        console.log(this.insertNode);
        let elInput = document.getElementById(this.contentId);
        let startPos = elInput.selectionStart;
        let endPos = elInput.selectionEnd;
        if (startPos === undefined || endPos === undefined) return;
        let txt = elInput.value;
        let result =
          txt.substring(0, startPos) + this.insertNode + txt.substring(endPos);
        this.inputValue = result;
        elInput.value = result;
        elInput.focus();
        elInput.selectionStart = startPos + this.insertNode.length;
        elInput.selectionEnd = startPos + this.insertNode.length;
        this.$emit("clear");
        // this.savedRange.insertNode(node)
      }
    },
    submitData() {
      if (document.getElementById(this.contentId)) {
        if (this.htmlType === "text") {
          return {
            index: this.htmlIndex,
            value: document.getElementById(this.contentId).innerText.trim(),
          };
        } else if (this.htmlType === "input") {
          return {
            index: this.htmlIndex,
            value: this.inputValue,
          };
        }
      } else {
        if (this.htmlType === "text") {
          return {
            index: this.htmlIndex,
            value: "",
          };
        } else if (this.htmlType === "input") {
          return {
            index: this.htmlIndex,
            value: "null",
          };
        }
      }
    },
  },
  beforeDestroy() {
    document.removeEventListener("selectionchange", this.selectHandler);
  },
};
</script>
  
  <style scoped>
div {
  display: contents;
}

.insert--input {
  /*min-width: 30px;*/
  max-width: 100px;
  color: aqua;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid aqua;
  border-radius: 0;
}
.insert--input:focus {
  outline: none;
  border-bottom: 1px solid aqua;
  box-shadow: none;
}
.insert--text {
  /*min-width: 30px;*/
  /*max-width: 100px;*/
  color: #1890ff;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0;
}
.insert--text:focus {
  outline: none;
  border-bottom: 1px solid aqua;
  box-shadow: none;
}
</style>
  